import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter, // 用于创建一个新的BrowserRouter实例
  defer, // 用于延迟加载数据
  Navigate, // 用于导航到不同的路由
  RouterProvider, // 用于提供路由上下文
} from "react-router-dom";
import Layout from "./shared/layout"; // 布局组件
import loadable from "./shared/loadable"; // 用于代码分割和懒加载组件
import axios from "axios"; // 用于发起HTTP请求

// 使用loadable和lazy实现组件的懒加载
const Topic = loadable(lazy(() => import("./pages/topic")));
const News = loadable(lazy(() => import("./pages/news")));
const Company = loadable(lazy(() => import("./pages/company")));
const Industry = loadable(lazy(() => import("./pages/industry")));
const About = loadable(lazy(() => import("./pages/about")));
const Login = loadable(lazy(() => import("./pages/login")));
const AdminHome = loadable(lazy(() => import("./pages/adminHome")));
const AuthRoute = loadable(lazy(() => import("./shared/authRoute")));
const Home = loadable(lazy(() => import("./pages/home")));

// 创建路由配置
const router = createBrowserRouter([
  {
    path: "/", // 根路由
    element: <Layout />, // 使用Layout组件作为页面布局
    errorElement: <div>页面没找到</div>, // 当路由匹配失败时显示的组件
    children: [ // 子路由配置
      {
        path: "",
        element: <Home />, // 首页组件
        loader: homeLoader, // 首页数据加载器
      },
      {
        path: "topic",
        element: <Topic />, // 话题页面组件
      },
      {
        path: "news",
        element: <News />, // 新闻页面组件
        children: [ // 新闻页面的子路由配置
          {
            index: true,
            element: <Navigate to="/news/company" />, // 默认重定向到公司新闻
          },
          {
            path: "company",
            element: <Company />, // 公司新闻组件
          },
          {
            path: "industry",
            element: <Industry />, // 行业新闻组件
          },
        ],
      },
      { path: "about/:team", element: <About /> }, // 关于我们页面，带有团队参数
      { path: "login", element: <Login /> }, // 登录页面
    ],
  },
  {
    path: "/admin", // 管理员路由
    element: <AuthRoute />, // 权限路由组件，用于验证是否有权限访问管理员页面
    children: [
      {
        path: "",
        element: <AdminHome />, // 管理员首页组件
      },
    ],
  },
]);

// 加载首页数据的异步函数
async function loadHomeData() {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/todos"
  );
  return response.data;
}

// 首页数据加载器，使用defer延迟加载数据
async function homeLoader() {
  return defer({
    todosPromise: loadHomeData(), // 将加载首页数据的Promise传递给defer
  });
}

// 创建根节点并渲染应用
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={router} />); // 使用RouterProvider提供路由上下文